﻿@model SMECustomerWebsite.Models.ViewModels.SalePerformance.DepositViewModel

@Html.Action("SubMenuSalePerformance", "System")
<!--Modal info dao -->
<div class="modal fade sp-dao-info cm-cp-dao-info" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12 profile_details">
                    <div class="well profile_view">
                        <div class="col-sm-12">
                            <h2 id="dao_info_name">@Model.DaoInfo.UserName</h2>
                            <p>
                                <strong>Position: </strong> <span id="dao_info_position">@Model.DaoInfo.ContractType</span>
                            </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-building"></i> <strong>Dao: </strong> <span id="dao_info_address">@Model.DaoInfo.Dao</span> </li>
                                <li><i class="fa fa-envelope"></i> <strong>Email : </strong><span id="dao_info_email">@Model.DaoInfo.Email</span></li>
                                <li><i class="fa fa-phone"></i> <strong>Branch : </strong><span id="dao_info_office">@Model.DaoInfo.Branch</span></li>
                                <li><i class="fa fa-phone"></i> <strong>Region : </strong><span id="dao_info_landline">@Model.DaoInfo.Zone</span></li>
                                <li><i class="fa fa-mobile"></i> <strong>Start working date : </strong> <span id="dao_info_phone">@Model.DaoInfo.StartWorkingDate</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<!-- /modals -->
<div class="row">
    @Html.Action("SubMenuLoanSalePerformance", "System")
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_title">
                @if (@Model.DaoInfo.Dao != "khong co DAO" && !string.IsNullOrEmpty(Model.Dao))
                {
                    <h2>@SMECustomerWebsite.Core.Resources.Resource.SalePerformanceTitle @Model.DaoInfo.FullName <a data-toggle="modal" data-target=".sp-dao-info" style="font-size:14px;"> <i class="fa fa-info-circle"></i> </a></h2>
                }
                else
                {
                    <h2>@SMECustomerWebsite.Core.Resources.Resource.NotChooseMsboSalePerformance</h2>
                }
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="title_right cm-search-box col-md-12 col-sm-12 ">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <table class="sme_unit_table">
                            <tr>
                                <td>
                                    <strong>Unit</strong>
                                </td>
                                <td>
                                    Balance: Billion VND
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>Quantity: Number</td>
                            </tr>
                        </table>
                    </div>
                    <div id="cp-search-box" class="col-md-5 cm-search-box">
                        @if (@Model.DaoInfo.GroupIdentifier != "4")
                        {
                            <div class="col-md-7">
                                <select id="sp-loan-msbo-dropdown" class="search_column form-control" tabindex="-1">
                                    <option></option>
                                </select>
                            </div>
                        }
                        <div class="col-md-5 pull-right">
                            <select id="sp-deposit-search-dropdown" class="search_column form-control" tabindex="-1">
                                <option></option>
                                <option value="1">1 month</option>
                                <option value="2">2 months</option>
                                <option value="3">3 months</option>
                                <option value="4">4 months</option>
                                <option value="5" selected="selected">5 months</option>
                                <option value="6">6 months</option>
                                <option value="7">7 months</option>
                                <option value="8">8 months</option>
                                <option value="9">9 months</option>
                                <option value="10">10 months</option>
                                <option value="11">11 months</option>
                                <option value="12">12 months</option>
                            </select>
                        </div>
                    </div>
                </div>
                @{
                    var currentStep = DateTime.Now.AddMonths(-1);
                    if (DateTime.Now.Day <= 10)
                    {
                        currentStep = DateTime.Now.AddMonths(-2);
                    }
                }
                <table id="sp-deposit" class="table table-bordered table-striped jambo_table custom_table break_header_table" style="width:100% !important">
                    <thead class="headings">
                        <tr>
                            <th class="column-title" rowspan="2">PRODUCT TYPE</th>
                            <th class="column-title" rowspan="2">PRODUCT</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-11).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-10).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-9).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-8).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-7).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-6).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-5).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-4).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-3).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-2).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.AddMonths(-1).ToString("yyyy-MM")</th>
                            <th class="column-title" colspan="2">@currentStep.ToString("yyyy-MM")</th>
                            <th class="column-title" rowspan="2">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                        </tr>
                        <tr>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.QuantHeader</th>
                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.BalanceHeader2</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@section scripts
{
    <!-- jQuery Sparklines -->
    <script src="/scripts/vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#sp-deposit-search-dropdown").select2({
                placeholder: "Select time",
            });

            var data =@Html.Raw(Json.Encode(Model.ListMSBO));
            $("#sp-loan-msbo-dropdown").select2({
                placeholder: "Select MSBO",
                data:data["Data"]
            });

            $("#sp-loan-msbo-dropdown").val("@Model.Dao").trigger("change");
            $("#sp-loan-msbo-dropdown").on("change", function (e) {
                msboselected = $("#sp-loan-msbo-dropdown").val();
                var link = "@Url.Action("LoanByCtUuDai", "SalePerformance", new { dao=-1})";
                link = link.replace("-1", msboselected);
                window.location.replace(link);
            });

            var monthSelected;
            var monthInvi;
            var visibleColumn = [0];

            var table = $('#sp-deposit').DataTable({
                bFilter: false,
                bInfo: false,
                bPaginate: false,
                "responsive": true,
                "bAutoWidth": true,
                "bServerSide": true,
                //"bProcessing": true,
                "sAjaxSource": '@Url.Action("LoanByCtUuDaiData", "SalePerformance")' + '?dao=@Model.Dao',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "aoColumns": [
                             { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title details-control', "bSortable": false }],
                "columnDefs": [
                    { "visible": false, "targets": visibleColumn },
                    {
                        "width": "6%",
                        "aTargets": [1]
                    },
                    {
                        "aTargets": [26],
                        "mRender": function (data, type, full) {
                            return '<a class=\"btn btn-primary btn-xs\" \"><i class="fa fa-plus-square"></i></a>';
                        }
                    }
                ],
                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;

                    api.column(0, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before(
                                '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                            );
                            last = group;
                        }
                    });
                    api.column(1, { page: 'current' }).data().each(function (group, j) {
                        if (group == '@SMECustomerWebsite.Core.Resources.Resource.NewLbl') {
                            var node = $(rows).eq(j)[0].childNodes;
                            for (var i = 2; i < node.length; i++) {
                                if (i % 2 == 0) {
                                    node[i].innerHTML = '-';
                                    node[i].className = 'td_disable';
                                }
                            }
                        }
                    });
                    monthSelected = $("#sp-deposit-search-dropdown").val();
                    monthInvi = 26 - monthSelected * 2;
                    for (var i = 2; i < 26; i++) {
                        var column = api.column(i);
                        if (i < monthInvi) {
                            column.visible(false);
                        } else {
                            column.visible(true);
                        }
                    }
                }
            });

            table.columns().every(function () {
                var that = this;

                $("#sp-deposit-search-dropdown").on("change", function (e) {
                    table = table;
                    monthSelected = $("#sp-deposit-search-dropdown").val();
                    monthInvi = 26 - monthSelected * 2;
                    for (var i = 2; i < 26; i++) {
                        var column = table.column(i);
                        if (i < monthInvi) {
                            column.visible(false);
                        } else {
                            column.visible(true);
                        }

                    }

                    that.search('').draw();
                });
            });

            $('#sp-deposit').on('click', 'td.details-control', function () {
                monthSelected = $("#sp-deposit-search-dropdown").val();
                monthInvi = 26 - monthSelected * 2;
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    $('tr td a i').addClass('fa-plus-square');
                    $('tr td a i').removeClass('fa-minus-square');
                }
                else {
                    // Open this row
                    var dataRow = row.data();
                    var bal = [];
                    var quant = [];
                    for (var j = monthInvi; j < dataRow.length - 1; j++) {
                        if (j % 2 == 0) {
                            bal.push(dataRow[j])
                        }
                        if (j % 2 != 0) {
                            quant.push(dataRow[j])
                        }
                    }
                    if (dataRow[1] == '@SMECustomerWebsite.Core.Resources.Resource.NewLbl') {
                        var detail = row.child(format2(row.data())).show();
                    } else {
                        var detail = row.child(format(row.data())).show();

                        $(".sparkline_area" + dataRow[26]).sparkline(quant, {
                            type: 'line',
                            lineColor: '#26B99A',
                            fillColor: 'rgba(111, 148, 67, 0.12)',
                            spotColor: '#4578a0',
                            minSpotColor: '#728fb2',
                            maxSpotColor: '#6d93c4',
                            highlightSpotColor: '#ef5179',
                            highlightLineColor: '#8ba8bf',
                            spotRadius: 2.5,
                            width: 155,
                            height: 20,
                        });
                    }

                    $(".sparkline" + dataRow[26]).sparkline(bal, {
                        type: 'bar',
                        height: '20',
                        barWidth: 20,
                        colorMap: {
                            '7': '#a1a1a1'
                        },
                        barSpacing: 2,
                        barColor: '#26B99A'
                    });

                    tr.addClass('shown');
                    $('tr.shown td a i').removeClass('fa-plus-square');
                    $('tr.shown td a i').addClass('fa-minus-square');
                }
            });
            function format(d) {
                // `d` is the original data object for the row
                return '<table class="table table-child"  cellpadding="5" cellspacing="0" border="0">' +
                    '<tr><td>@SMECustomerWebsite.Core.Resources.Resource.QuantityChart</td><td>@SMECustomerWebsite.Core.Resources.Resource.BalanceChart</td></tr>' +
                        '<tr>' +
                            '<td><span class="sparkline' + d[26] + ' graph" style="height: 30px;"><canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas></span></td>' +
                            '<td><span class="sparkline_area' + d[26] + '" style="height: 160px;"> <canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas> </span></td>' +
                        '</tr>' +
                    '</table>';
            }
            function format2(d) {
                // `d` is the original data object for the row
                return '<table  class="table table-child" cellpadding="5" cellspacing="0" border="0">' +
                    '<tr><td>@SMECustomerWebsite.Core.Resources.Resource.QuantityChart</td></tr>' +
                    '<tr>' +
                        '<td><span class="sparkline' + d[26] + ' graph" style="height: 30px;"><canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas></span></td>' +
                    '</tr>' +
                '</table>';
            }
        });
    </script>
}